<template>
    <div class="back">
        <div class="login">
            <van-form @submit="onSubmit">
                <van-field
                        v-model="username"
                        name="user"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                        v-model="password"
                        type="password"
                        name="pass"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
    import {check} from "../../network/user";
    import { Toast } from 'vant';
    export default {
        name: "Test1",
        data(){
            return{
                username: '',
                password: '',
            }
        },
        mounted() {

        },
        methods:{
            onSubmit(values) {
                // console.log('submit', values.user);
                check(values.user,values.pass).then(res => {
                    console.log(res);
                    if(res.status === 200){
                        // Toast.success('登录成功');
                        this.$router.push('/info')
                        this.$store.state.info = res.data
                    }else {
                        Toast.fail('用户名或密码错误');
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .login{
        position: relative;
        top: 33vh;
        /*width: 60vw;*/

    }
    .back{
        height: 100%;
        width: 100%;
        background-image: url("../../assets/imgs/6.jpg");
        background-size: 100% 100%;
        background-attachment: fixed;
        background-repeat:no-repeat;
        position: absolute;
    }
</style>